<template>
  <div>
    <van-nav-bar title="发布房源" left-arrow @click-left="$router.back()" />
    <div class="info">
      <h3>房源信息</h3>
      <div class="mian">
        <p>小区名称</p>
        <p>
          <input
            type="text"
            placeholder="输入小区名词"
            v-model="house.community"
          />>
        </p>
      </div>
      <div class="mian">
        <p>租金</p>
        <p><input v-model="house.price" placeholder="请输入租金" /></p>
        <p>￥/月</p>
      </div>
      <div class="mian">
        <p>建筑面积</p>
        <p><input v-model="house.size" placeholder="请输入建筑面积" /></p>
        <p>m</p>
      </div>
      <div class="mian">
        <p @click="showPicker = true">户型</p>
        <div @click="showPicker1 = true">{{ roomType }}</div>
        <van-popup v-model="showPicker1" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns1"
            value-key="label"
            @cancel="showPicker1 = false"
            @confirm="onConfirm1"
          />
        </van-popup>
      </div>
      <div class="mian">
        <p @click="showPicker = true">所在楼层</p>
        <div @click="showPicker = true">{{ activeFloor }}</div>
        <van-popup v-model="showPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            value-key="label"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>
      </div>
      <div class="mian">
        <p @click="showPicker = true">朝向</p>
        <div @click="showPicker2 = true">{{ oriented }}</div>
        <van-popup v-model="showPicker2" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns2"
            value-key="label"
            @cancel="showPicker2 = false"
            @confirm="onConfirm2"
          />
        </van-popup>
      </div>
      <div>
        <p>房屋标题</p>
        <p>
          <textarea
            name=""
            id=""
            cols="30"
            rows="10"
            placeholder="请输入标题(例如：整租 小区名 2室 5000元)"
            v-model="house.title"
          ></textarea>
        </p>
      </div>
      <div>
        <p>房屋图像</p>
        <div class="pic"><input type="file" /></div>
      </div>
      <div>
        <p>房屋配置</p>
        <div class="configure">
          <van-grid
            :column-num="5"
            :border="false"
            :gutter="1"
            :clickable="true"
            v-model="house.supporting"
          >
            <van-grid-item :dot="item.isSelect" @click="selectItem(index)" v-for="(item, index) in list" :key="index" icon="photo-o" :text="item.text" />
          </van-grid>
        </div>
      </div>
      <div>
        <p>房屋描述</p>
        <p>
          <textarea
            name=""
            id=""
            cols="30"
            rows="10"
            placeholder="请输入房屋描述信息"
            v-model="house.description"
          ></textarea>
        </p>
      </div>
      <div class="button">
        <button class="one">取消</button>
        <button class="two" @click="cuzufangzi">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import { tolet } from '@/api/user'
export default {
  data () {
    return {
      house: {
        community: '',
        description: '',
        floor: '',
        houseImg: 'uploads/upload_53c9773bc1551ccebf180af4da523849.jpg',
        oriented: '',
        price: '',
        roomType: '',
        size: '',
        supporting: '',
        title: ''
      },
      list: [
        { text: '衣柜', isSelect: false },
        { text: '洗衣机', isSelect: false },
        { text: '空调', isSelect: false },
        { text: '天然气', isSelect: false },
        { text: '冰箱', isSelect: false },
        { text: '暖气', isSelect: false },
        { text: '电视', isSelect: false },
        { text: '热水器', isSelect: false },
        { text: '宽带', isSelect: false },
        { text: '沙发', isSelect: false }
      ],
      columns: [
        { label: '高层', id: 'FLOOR|1' },
        { label: '中层', id: 'FLOOR|2' },
        { label: '底层', id: 'FLOOR|3' }
      ],
      showPicker: false,
      showPicker1: false,
      showPicker2: false,
      activeFloor: '请选择楼层',
      columns1: [
        { label: '一室', id: 'ROOM|d4a692e4-a177-37fd' },
        { label: '二室', id: 'ROOM|d1a00384-5801-d5cd' }
      ],
      roomType: '请选择户型',
      columns2: [
        { label: '东', id: 'ORIEN|141b98bf-1ad0-11e3' },
        { label: '西', id: 'ORIEN|103fb3aa-e8b4-de0e' }
      ],
      oriented: '请选择朝向'
    }
  },
  created () {},
  methods: {
    async cuzufangzi () {
      const res = this.list.filter(item => item.isSelect === true)
      res.forEach((item) => {
        this.house.supporting += item.text + '|'
      })
      this.house.supporting = this.house.supporting.substring(0, this.house.supporting.length - 1)
      console.log(this.house)

      tolet(this.house)
    },
    onConfirm (value, index) {
      this.activeFloor = this.columns[index].label
      console.log(value)
      this.house.floor = value.id
      this.showPicker = false
    },
    onConfirm1 (value, index) {
      this.roomType = this.columns1[index].label
      console.log(value)
      this.house.roomType = value.id
      this.showPicker = false
    },
    onConfirm2 (value, index) {
      this.oriented = this.columns2[index].label
      console.log(value)
      this.house.oriented = value.id
      this.showPicker = false
    },
    selectItem (i) {
      this.list[i].isSelect = !this.list[i].isSelect
    }
  }
}
</script>

<style lang="less" scoped>
.info {
  margin-left: 10px;
  margin-right: 10px;
}
h3 {
  color: #21b97a;
}
.mian {
  display: flex;
  justify-content: space-between;
}
.configure {
  height: 200px;
}
.button {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  /* background-color: pink; */
  display: flex;
  justify-content: space-between;
}
button {
  border-style: none;
  border-radius: 0;
}
.one {
  width: 50%;
  background-color: #fff;
  color: #21b97a;
}
.two {
  width: 50%;
}
textarea {
  border: 0;
  outline: none;
}
input {
  border: 0;
  outline: none;
}
</style>
